<!-- @module info -->
<!-- @author: YunTao.Li -->
<!-- @description: 消息列表 -->
<!-- @since: 2020-03-17 16:49:46 -->

<template>
  <div class="app-container">
    <!-- form begin -->
    <el-form ref="queryForm" label-width="120px" class="div-header" :model="queryForm" size="mini">
      <fieldset class="fieldset" style="margin-top:0px;">
        <legend class="legend-font" v-text="text_form" />
        <el-row :gutter="10">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="标题" prop="msgTitle">
              <el-input v-model="queryForm.msgTitle" placeholder="标题" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="开始时间" prop="startDate">
              <el-date-picker v-model="queryForm.startDate" style="width:100%;" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="结束时间" prop="endDate">
              <el-date-picker v-model="queryForm.endDate" style="width:100%;" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" />
            </el-form-item>
          </el-col>
        </el-row>
        <div style="text-align: center;padding-top: 5px;padding-bottom: 5px;">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="getList()"
          >查询</el-button>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-refresh"
            @click="resetForm('queryForm')"
          >重置</el-button>
        </div>
      </fieldset>
    </el-form>
    <!-- form end -->
    <div class="div-body">
      <div class="div-button">
        <!-- <el-button
          icon="el-icon-refresh"
          type="primary"
          size="small"
          :disabled.sync="btn_sync_disabled"
          @click="onDataSync()"
        >考勤同步</el-button> -->
      </div>
      <!-- table begin-->
      <div class="div-table">
        <fieldset class="fieldset" style="margin-top:15px;">
          <legend class="legend-font" v-text="text_grid" />
          <el-table
            v-loading="listLoading"
            :data="list"
            border
            fit
            highlight-current-row
            style="width: 100%"
            max-height="460"
            :row-class-name="tableRowClassName"
            @row-dblclick="messageDetailToggle"
          >
            <el-table-column type="index" width="55" label="序号" fixed />
            <!--发件人-->
            <el-table-column width="150px" align="center" label="发件人" fixed>
              <template slot-scope="scope">
                <span>{{ scope.row.mcFrom }}</span>
              </template>
            </el-table-column>
            <!--标题-->
            <el-table-column align="left" label="标题" fixed>
              <template slot-scope="scope">
                <span>{{ scope.row.mcTitle }}</span>
              </template>
            </el-table-column>
            <!--发送时间-->
            <el-table-column width="250px" align="center" label="时间">
              <template slot-scope="scope">
                <span>{{ scope.row.mcSendtime }}</span>
              </template>
            </el-table-column>
            <!--操作-->
            <el-table-column width="100px" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="messageDetailToggle(scope.row)"
                >查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </fieldset>
      </div>

      <!-- table end -->
      <pagination v-show="total>0" :total="total" :page.sync="queryForm.page" :limit.sync="queryForm.limit" @pagination="getList" />

      <messageDetail ref="messageDetailDialog" />
    </div>
  </div>
</template>

<script>
import { messageInfoList, messageUpdate } from '@/api/message/message-service'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import messageDetail from '@/views/message/component/messageDetailBox'

export default {
  components: { Pagination, messageDetail },
  data() {
    return {
      msg: '-',
      text_form: '查询信息',
      text_grid: '消息信息',
      list: [],
      listLoading: true,
      total: 0,
      queryForm: {
        page: 1,
        limit: 10,
        msgTitle: '',
        startDate: null,
        endDate: null
      }, inputRules: {
      }
    }
  },
  created() {
    const queryRange = localStorage.getItem('queryRange')
    this.queryForm.queryRange = queryRange
  },
  mounted() {
    this.getList()
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    getList() {
      this.listLoading = true
      messageInfoList(this.queryForm).then(response => {
        this.list = response.data.records
        this.total = response.data.total

        // 假loading 1秒后消失
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      })
    },
    messageDetailToggle(row) {
      const messageStatus = row.mcStatus
      if (messageStatus !== 2) {
        row.mcStatus = 2
        messageUpdate(row.mcId, row)
      }

      this.$refs.messageDetailDialog.toggele(row)
    },
    tableRowClassName(row) {
      const msgObject = row.row
      const msgStatus = msgObject.mcStatus
      if (msgStatus === 2) {
        return ''
      }
      return 'message-unread'
    }
  }
}
</script>

<style>
.el-table .message-unread {
  font-weight: bolder;
  }
</style>
<style scoped>

.el-table__header{
    font-size: 10px
}
.el-table{
    font-size: 12px
}
.div-body{
  margin-top: 5px;
}
.div-header{
  font-size: 12px
}
.el-form-item__label{
  font-size: 12px
}
element.style{
  padding-top: 0px;
}
fieldset {
    display: block;
    margin-inline-start: 1px;
    margin-inline-end: 1px;
    padding-block-start: 0.35em;
    padding-inline-start: 0.75em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    min-inline-size: min-content;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(200, 202, 204);
    border-image: initial;
}
div.popContainer{
    position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .5);
        color: white;
}
</style>
